/**
 * 模板提炼组件
 * 从样例文章中提炼出可复用的模板
 */

import React, { useState, useEffect } from 'react';
import {
  Steps,
  Form,
  Input,
  Select,
  Button,
  Space,
  Card,
  Alert,
  Typography,
  Divider,
  Row,
  Col,
  Tag,
  Spin,
  message,
  Checkbox,
  Radio,
  Progress,
  List,
  Tooltip,
  Upload
} from 'antd';
import {
  FileTextOutlined,
  BulbOutlined,
  EditOutlined,
  CheckCircleOutlined,
  LoadingOutlined,
  InfoCircleOutlined,
  ExperimentOutlined,
  FormatPainterOutlined,
  HighlightOutlined,
  PlusOutlined,
  UploadOutlined,
  DeleteOutlined
} from '@ant-design/icons';
import { generationService } from '@/services/generation.service';
import { templateService } from '@/services/template.service';
import { useModelConfigStore } from '@/stores/model-config.store';
import type { ModelConfigInfo } from '@/types/model-config';
import './style.css';

const { Title, Text, Paragraph } = Typography;
const { TextArea } = Input;
const { Step } = Steps;

interface TemplateExtractorProps {
  onComplete: (template: any) => void;
  onCancel: () => void;
}

const TemplateExtractor: React.FC<TemplateExtractorProps> = ({
  onComplete,
  onCancel
}) => {
  const [form] = Form.useForm();
  const [currentStep, setCurrentStep] = useState(0);
  const [loading, setLoading] = useState(false);
  const [extractedTemplate, setExtractedTemplate] = useState<any>(null);
  const [analysisResult, setAnalysisResult] = useState<any>(null);

  // 使用与AI对话相同的模型获取方式
  const [availableModels, setAvailableModels] = useState<ModelConfigInfo[]>([]);
  const [selectedModel, setSelectedModel] = useState<string>('');
  const { configs, loadConfigs } = useModelConfigStore();

  // 样例文章输入步骤
  const [sampleArticles, setSampleArticles] = useState<string[]>(['']);
  const [articleType, setArticleType] = useState('');
  const [extractionOptions, setExtractionOptions] = useState({
    extractStructure: true,
    extractStyle: true,
    extractKeywords: true,
    extractVariables: true,
    generateOutline: true
  });
  
  // 从模型配置store加载模型
  useEffect(() => {
    console.log('[模板提取器] 开始初始化模型');

    const initModels = async () => {
      try {
        console.log('[模板提取器] 调用loadConfigs...');
        await loadConfigs();
        console.log('[模板提取器] loadConfigs完成');
      } catch (error) {
        console.error('[模板提取器] 模型加载失败:', error);
      }
    };

    initModels();
  }, [loadConfigs]);

  // 监听configs变化，更新可用模型列表
  useEffect(() => {
    console.log('[模板提取器] 收到configs更新，共', configs.length, '个配置');
    console.log('[模板提取器] 配置列表:', configs.map(c => `${c.displayName || c.modelName} (isActive:${c.isActive}, status:${c.status})`));

    // 只使用isActive且状态为healthy的配置
    const activeConfigs = configs.filter(c => c.isActive && c.status === 'healthy');
    console.log('[模板提取器] 可用配置:', activeConfigs.length, '个');
    if (activeConfigs.length > 0) {
      console.log('[模板提取器] 可用模型列表:', activeConfigs.map(c => c.displayName || c.modelName));
    }
    setAvailableModels(activeConfigs);

    // 自动选择第一个可用配置
    if (activeConfigs.length > 0 && !selectedModel) {
      const firstModel = activeConfigs[0];
      console.log('[模板提取器] 自动选择模型:', firstModel.displayName || firstModel.modelName);
      setSelectedModel(firstModel.id);
    }
  }, [configs, selectedModel]);

  // 添加更多样例
  const addSampleArticle = () => {
    setSampleArticles([...sampleArticles, '']);
  };

  // 更新样例文章
  const updateSampleArticle = (index: number, value: string) => {
    const newSamples = [...sampleArticles];
    newSamples[index] = value;
    setSampleArticles(newSamples);
    console.log(`[更新样例] 第${index + 1}篇文章已更新，长度:`, value.length);
  };

  // 从AI响应中提取JSON
  const extractJSON = (text: string): any => {
    try {
      // 尝试直接解析
      return JSON.parse(text);
    } catch (e) {
      // 尝试提取JSON代码块
      const jsonBlockMatch = text.match(/```json\s*([\s\S]*?)\s*```/);
      if (jsonBlockMatch) {
        try {
          return JSON.parse(jsonBlockMatch[1]);
        } catch (e2) {
          // 继续尝试其他方法
        }
      }

      // 尝试提取花括号内容
      const braceMatch = text.match(/\{[\s\S]*\}/);
      if (braceMatch) {
        try {
          return JSON.parse(braceMatch[0]);
        } catch (e3) {
          // 继续尝试其他方法
        }
      }

      throw new Error('无法从响应中提取有效的JSON');
    }
  };

  // 删除样例文章
  const removeSampleArticle = (index: number) => {
    if (sampleArticles.length > 1) {
      const newSamples = sampleArticles.filter((_, i) => i !== index);
      setSampleArticles(newSamples);
    }
  };

  // 处理文件上传
  const handleFileUpload = async (file: File) => {
    const fileType = file.name.split('.').pop()?.toLowerCase();

    console.log('开始上传文件:', file.name, '类型:', fileType);

    try {
      let content = '';

      if (fileType === 'txt') {
        // 读取txt文件
        content = await file.text();
        console.log('TXT文件读取成功，长度:', content.length);
      } else if (fileType === 'doc') {
        // 旧版Word格式不支持
        message.error({
          content: '不支持旧版Word格式(.doc)，请将文件另存为.docx格式后重试',
          duration: 5
        });
        return false;
      } else if (fileType === 'docx' || fileType === 'pdf') {
        // 调用后端API处理Word和PDF文件
        message.loading({ content: '正在处理文件...', key: 'file-upload' });
        try {
          console.log('调用后端API处理文件...');
          content = await templateService.extractTextFromFile(file);
          console.log('文件处理成功，提取文本长度:', content.length);
          message.success({ content: '文件处理成功', key: 'file-upload' });
        } catch (error: any) {
          console.error('后端API处理失败:', error);
          message.error({
            content: error.message || '文件处理失败',
            key: 'file-upload'
          });
          return false;
        }
      } else {
        message.error('不支持的文件类型，仅支持txt、docx(新版Word)、pdf格式');
        return false;
      }

      if (content) {
        // 找到第一个空的样例槽位，如果都有内容则添加新的
        const emptyIndex = sampleArticles.findIndex(s => !s.trim());
        if (emptyIndex >= 0) {
          // 更新空槽位
          const newSamples = [...sampleArticles];
          newSamples[emptyIndex] = content;
          setSampleArticles(newSamples);
          console.log(`[文件上传] 文件内容已填充到第${emptyIndex + 1}个样例槽位`);
        } else {
          // 添加新槽位
          setSampleArticles([...sampleArticles, content]);
          console.log('[文件上传] 文件内容已添加为新样例');
        }
        message.success('文件内容已加载');
        console.log('文件内容预览（前200字）:', content.substring(0, 200));
      } else {
        console.warn('文件内容为空');
        message.warning('文件内容为空');
      }
    } catch (error) {
      console.error('文件读取失败:', error);
      message.error('文件读取失败');
    }

    return false; // 阻止自动上传
  };

  // 分析样例文章
  const analyzeArticles = async () => {
    const validSamples = sampleArticles.filter(s => s.trim());
    console.log('[分析] 所有样例文章:', sampleArticles);
    console.log('[分析] 有效样例文章数量:', validSamples.length);
    console.log('[分析] 有效样例文章内容预览:', validSamples.map(s => s.substring(0, 100) + '...'));

    if (validSamples.length === 0) {
      message.warning('请至少输入一篇样例文章');
      return;
    }
    
    if (!selectedModel) {
      message.warning('请选择分析模型');
      return;
    }
    
    // 获取选中的模型配置
    const config = availableModels.find(c => c.id === selectedModel);
    if (!config) {
      message.error('所选模型配置不可用');
      return;
    }

    console.log('选中的模型配置:', {
      id: config.id,
      name: config.modelName,
      provider: config.providerId,
      status: config.status,
      baseUrl: config.baseUrl,
      hasApiKey: !!config.apiKey,
      apiKeyLength: config.apiKey?.length || 0
    });

    setLoading(true);
    try {
      // 构建分析提示词
      const analysisPrompt = `请分析以下样例文章，提炼出通用的写作模板。

【样例文章内容】
${validSamples.map((article, index) => `
样例${index + 1}：
${article}
`).join('\n---分隔线---\n')}

【分析任务】
请仔细阅读上述样例文章，从以下维度进行深度分析：

1. **文章结构**：识别开头、主体、结尾的组织方式和逻辑关系
2. **写作风格**：分析语言风格、语气特点、用词习惯
3. **核心要素**：提取文章必须包含的关键信息点
4. **可变部分**：识别可以替换的变量（如人名、地名、数字等）
5. **固定模式**：找出重复出现的句式或段落结构

【输出要求】
**必须严格按照以下JSON格式输出，不要添加任何解释文字：**

{
  "structure": {
    "introduction": "开头部分的写作模式和要点",
    "body": ["主体段落1的模式", "主体段落2的模式", "主体段落3的模式"],
    "conclusion": "结尾部分的写作模式和总结方式"
  },
  "style": {
    "tone": "整体语气风格（如：正式、亲切、专业等）",
    "language": "语言表达特点（如：简洁明快、详细论述等）",
    "vocabulary": "词汇使用特征（如：技术术语较多、口语化表达等）"
  },
  "keyElements": ["必备要素1", "必备要素2", "必备要素3"],
  "variables": [
    {"name": "变量1", "description": "该变量的作用说明", "example": "具体示例值"},
    {"name": "变量2", "description": "该变量的作用说明", "example": "具体示例值"}
  ],
  "patterns": ["常见句式模式1", "常见句式模式2"],
  "templateSuggestion": "基于以上分析，建议的通用模板结构描述"
}

请直接输出JSON，不要用markdown代码块包裹。`;

      // 调用AI服务进行分析
      console.log('准备调用AI服务，模型:', config.modelName);
      console.log('样例文章数量:', validSamples.length);
      console.log('样例文章长度:', validSamples.map(s => s.length));

      const response = await generationService.generate({
        model: config.modelName,
        provider: config.providerId,
        apiKey: config.apiKey,
        baseUrl: config.baseUrl,
        messages: [
          {
            role: 'system',
            content: '你是一个专业的写作模板分析专家，擅长从样例文章中提取通用的写作模板和模式。请只返回JSON格式的结果，不要添加任何额外的说明文字。'
          },
          {
            role: 'user',
            content: analysisPrompt
          }
        ],
        parameters: {
          temperature: 0.3,
          maxTokens: 4000,
          topP: 0.9,
          presencePenalty: 0,
          frequencyPenalty: 0
        },
        stream: false
      });

      // 解析AI返回的结果
      try {
        console.log('AI返回的原始内容:', response.content);

        // 检查是否返回了错误消息
        if (response.content && (
          response.content.includes('API调用失败') ||
          response.content.includes('API调用异常') ||
          response.content.includes('API error')
        )) {
          console.error('API返回错误:', response.content);
          message.error(response.content);
          setCurrentStep(0);
          return;
        }

        const analysis = extractJSON(response.content);
        console.log('解析后的分析结果:', analysis);
        setAnalysisResult(analysis);

        // 自动进入下一步
        setCurrentStep(1);

        // 基于分析结果生成初始模板
        generateTemplateFromAnalysis(analysis);
      } catch (parseError) {
        console.error('JSON解析失败:', parseError);
        console.log('原始响应内容:', response.content);
        // 如果解析失败，使用纯文本结果
        setAnalysisResult({ rawAnalysis: response.content });
        message.warning('分析完成，但结果格式有误，请手动编辑模板');
        setCurrentStep(1);
      }
    } catch (error) {
      console.error('分析失败:', error);
      message.error('分析失败，请重试');
    } finally {
      setLoading(false);
    }
  };

  // 基于分析结果生成模板
  const generateTemplateFromAnalysis = async (analysis: any) => {
    console.log('[生成模板] 开始生成模板，分析结果:', analysis);
    setLoading(true);
    try {
      const templatePrompt = `基于以下分析结果，生成一个可复用的写作模板：

分析结果：
${JSON.stringify(analysis, null, 2)}

请生成一个包含变量占位符的模板，使用 {变量名} 格式标记可替换部分。
模板应该：
1. 保持原文的结构和风格
2. 将具体内容替换为通用描述和变量
3. 包含清晰的写作指导
4. 标注每个部分的写作要点

请直接返回模板内容，不需要额外说明。`;

      // 获取选中的模型配置
      const config = availableModels.find(c => c.id === selectedModel);
      if (!config) {
        console.error('[生成模板] 所选模型配置不可用');
        message.error('所选模型配置不可用');
        // 即使失败也创建基础模板
        createBasicTemplate(analysis);
        return;
      }

      // 检查API配置
      if (!config.apiKey) {
        console.error('[生成模板] 缺少API密钥');
        message.error({
          content: '所选模型配置缺少API密钥，将使用分析结果创建基础模板',
          duration: 5
        });
        // 即使失败也创建基础模板
        createBasicTemplate(analysis);
        return;
      }

      console.log('[生成模板] 调用AI生成模板...');
      const response = await generationService.generate({
        model: config.modelName,
        provider: config.providerId,
        apiKey: config.apiKey,
        baseUrl: config.baseUrl,
        messages: [
          {
            role: 'system',
            content: '你是一个专业的写作模板设计师，擅长创建清晰、实用的写作模板。'
          },
          {
            role: 'user',
            content: templatePrompt
          }
        ],
        parameters: {
          temperature: 0.5,
          maxTokens: 4000,
          topP: 0.9,
          presencePenalty: 0,
          frequencyPenalty: 0
        },
        stream: false
      });

      console.log('[生成模板] AI返回内容长度:', response.content?.length || 0);

      const template = {
        name: form.getFieldValue('templateName') || '新模板',
        description: form.getFieldValue('description') || '',
        category: articleType,
        content: response.content || analysis.templateSuggestion || '请根据分析结果编写模板内容',
        variables: analysis.variables || [],
        structure: analysis.structure,
        style: analysis.style,
        keyElements: analysis.keyElements || [],
        usageCount: 0,
        createdAt: new Date().toISOString()
      };

      console.log('[生成模板] 模板创建成功:', template);
      setExtractedTemplate(template);
      message.success('模板生成成功');
    } catch (error) {
      console.error('[生成模板] 生成模板失败:', error);
      message.warning('AI生成模板失败，将使用分析结果创建基础模板');
      // 即使失败也创建基础模板
      createBasicTemplate(analysis);
    } finally {
      setLoading(false);
    }
  };

  // 创建基础模板（当AI生成失败时使用）
  const createBasicTemplate = (analysis: any) => {
    console.log('[创建基础模板] 使用分析结果创建基础模板');
    const basicTemplate = {
      name: '新模板',
      description: '基于AI分析结果的模板',
      category: articleType,
      content: analysis.templateSuggestion || `
# 写作模板

## 开头
${analysis.structure?.introduction || '引入主题'}

## 主体
${analysis.structure?.body?.map((item: string, index: number) => `
### 部分 ${index + 1}
${item}
`).join('\n') || '展开论述'}

## 结尾
${analysis.structure?.conclusion || '总结全文'}

## 可用变量
${analysis.variables?.map((v: any) => `- {${v.name}}: ${v.description}`).join('\n') || '暂无'}
`,
      variables: analysis.variables || [],
      structure: analysis.structure,
      style: analysis.style,
      keyElements: analysis.keyElements || [],
      usageCount: 0,
      createdAt: new Date().toISOString()
    };

    console.log('[创建基础模板] 基础模板创建完成');
    setExtractedTemplate(basicTemplate);
  };

  // 完成提炼
  const handleComplete = () => {
    if (!extractedTemplate) {
      message.warning('请先生成模板');
      return;
    }

    // 添加用户编辑的信息
    const finalTemplate = {
      ...extractedTemplate,
      name: form.getFieldValue('templateName') || extractedTemplate.name,
      description: form.getFieldValue('description') || extractedTemplate.description,
      content: form.getFieldValue('templateContent') || extractedTemplate.content,
      tags: form.getFieldValue('tags') || []
    };

    onComplete(finalTemplate);
    message.success('模板提炼完成！');
  };

  // 步骤配置
  const steps = [
    {
      title: '输入样例',
      icon: <FileTextOutlined />
    },
    {
      title: '分析提炼',
      icon: <ExperimentOutlined />
    },
    {
      title: '编辑完善',
      icon: <EditOutlined />
    }
  ];

  return (
    <div className="template-extractor">
      <Steps current={currentStep} className="extraction-steps">
        {steps.map(item => (
          <Step key={item.title} title={item.title} icon={item.icon} />
        ))}
      </Steps>

      <Divider />

      <Spin spinning={loading} tip="AI正在分析样例文章...">
        {/* 步骤1：输入样例文章 */}
        {currentStep === 0 && (
          <div className="step-content">
            <Alert
              message="提示"
              description="输入一篇或多篇同类型的样例文章，AI将分析并提炼出通用的写作模板。样例越多，提炼的模板越准确。"
              type="info"
              showIcon
              style={{ marginBottom: 20 }}
            />

            <Form form={form} layout="vertical">
              <Row gutter={16}>
                <Col span={12}>
                  <Form.Item label="文章类型" required>
                    <Select
                      placeholder="选择文章类型"
                      value={articleType}
                      onChange={setArticleType}
                    >
                  <Select.Option value="news">新闻报道</Select.Option>
                  <Select.Option value="product">产品描述</Select.Option>
                  <Select.Option value="tech">技术文档</Select.Option>
                  <Select.Option value="blog">博客文章</Select.Option>
                  <Select.Option value="marketing">营销文案</Select.Option>
                  <Select.Option value="email">邮件模板</Select.Option>
                  <Select.Option value="social">社交媒体</Select.Option>
                  <Select.Option value="academic">学术论文</Select.Option>
                  <Select.Option value="creative">创意写作</Select.Option>
                      <Select.Option value="business">商务文档</Select.Option>
                    </Select>
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item label="分析模型" required>
                    <Select
                      placeholder="选择AI模型"
                      value={selectedModel}
                      onChange={setSelectedModel}
                      loading={availableModels.length === 0}
                      notFoundContent={availableModels.length === 0 ? "加载中..." : "暂无可用模型"}
                    >
                      {availableModels.map(config => (
                        <Select.Option key={config.id} value={config.id}>
                          <Space>
                            <span>{config.providerId}</span>
                            <span style={{ color: '#8c8c8c' }}>-</span>
                            <span>{config.displayName || config.modelName}</span>
                            {config.isActive && config.status === 'healthy' && (
                              <Tag color="green" style={{ marginLeft: 8 }}>可用</Tag>
                            )}
                          </Space>
                        </Select.Option>
                      ))}
                    </Select>
                  </Form.Item>
                </Col>
              </Row>

              <Form.Item label="提炼选项">
                <Space direction="vertical">
                  <Checkbox
                    checked={extractionOptions.extractStructure}
                    onChange={e => setExtractionOptions({
                      ...extractionOptions,
                      extractStructure: e.target.checked
                    })}
                  >
                    提取文章结构
                  </Checkbox>
                  <Checkbox
                    checked={extractionOptions.extractStyle}
                    onChange={e => setExtractionOptions({
                      ...extractionOptions,
                      extractStyle: e.target.checked
                    })}
                  >
                    分析写作风格
                  </Checkbox>
                  <Checkbox
                    checked={extractionOptions.extractKeywords}
                    onChange={e => setExtractionOptions({
                      ...extractionOptions,
                      extractKeywords: e.target.checked
                    })}
                  >
                    提取关键词
                  </Checkbox>
                  <Checkbox
                    checked={extractionOptions.extractVariables}
                    onChange={e => setExtractionOptions({
                      ...extractionOptions,
                      extractVariables: e.target.checked
                    })}
                  >
                    识别可变部分
                  </Checkbox>
                  <Checkbox
                    checked={extractionOptions.generateOutline}
                    onChange={e => setExtractionOptions({
                      ...extractionOptions,
                      generateOutline: e.target.checked
                    })}
                  >
                    生成大纲
                  </Checkbox>
                </Space>
              </Form.Item>

              <Form.Item label="样例文章">
                <Space direction="vertical" style={{ width: '100%' }}>
                  <Upload
                    accept=".txt,.docx,.pdf"
                    beforeUpload={handleFileUpload}
                    showUploadList={false}
                  >
                    <Button icon={<UploadOutlined />} block>
                      上传文件 (支持txt、docx、pdf，不支持旧版.doc)
                    </Button>
                  </Upload>

                  <Divider>或手动输入</Divider>

                  {sampleArticles.map((article, index) => (
                  <Card
                    key={index}
                    size="small"
                    title={`样例 ${index + 1}`}
                    extra={
                      sampleArticles.length > 1 && (
                        <Button
                          type="text"
                          danger
                          size="small"
                          onClick={() => removeSampleArticle(index)}
                        >
                          删除
                        </Button>
                      )
                    }
                    style={{ marginBottom: 16 }}
                  >
                    <TextArea
                      value={article}
                      onChange={e => updateSampleArticle(index, e.target.value)}
                      placeholder="请粘贴样例文章内容..."
                      rows={8}
                      maxLength={5000}
                      showCount
                    />
                  </Card>
                ))}

                <Button
                  type="dashed"
                  onClick={addSampleArticle}
                  icon={<PlusOutlined />}
                  block
                >
                  添加更多样例
                </Button>
                </Space>
              </Form.Item>
            </Form>

            <div className="step-actions">
              <Space>
                <Button onClick={onCancel}>取消</Button>
                <Button
                  type="primary"
                  onClick={analyzeArticles}
                  disabled={!articleType || !selectedModel || sampleArticles.every(s => !s.trim())}
                >
                  开始分析
                </Button>
              </Space>
            </div>
          </div>
        )}

        {/* 步骤2：分析结果展示 */}
{currentStep === 1 && analysisResult && (
          <div className="step-content">
            <Title level={4}>分析结果</Title>

            {/* 显示原始分析（如果JSON解析失败） */}
            {analysisResult.rawAnalysis && (
              <Card title="原始分析结果" size="small" style={{ marginBottom: 16 }}>
                <Alert
                  type="warning"
                  message="JSON格式解析失败，显示原始分析内容"
                  style={{ marginBottom: 16 }}
                />
                <pre style={{
                  whiteSpace: 'pre-wrap',
                  wordBreak: 'break-word',
                  maxHeight: '400px',
                  overflow: 'auto',
                  background: '#f5f5f5',
                  padding: '12px',
                  borderRadius: '4px'
                }}>
                  {analysisResult.rawAnalysis}
                </pre>
              </Card>
            )}

            {analysisResult.structure && (
              <Card title="文章结构" size="small" style={{ marginBottom: 16 }}>
                <Paragraph>
                  <Text strong>开头：</Text> {analysisResult.structure.introduction}
                </Paragraph>
                <Paragraph>
                  <Text strong>主体：</Text>
                  <ul>
                    {analysisResult.structure.body?.map((item: string, index: number) => (
                      <li key={index}>{item}</li>
                    ))}
                  </ul>
                </Paragraph>
                <Paragraph>
                  <Text strong>结尾：</Text> {analysisResult.structure.conclusion}
                </Paragraph>
              </Card>
            )}

            {analysisResult.style && (
              <Card title="写作风格" size="small" style={{ marginBottom: 16 }}>
                <Space direction="vertical" style={{ width: '100%' }}>
                  <div><Text strong>语气：</Text> {analysisResult.style.tone}</div>
                  <div><Text strong>语言特点：</Text> {analysisResult.style.language}</div>
                  <div><Text strong>词汇特征：</Text> {analysisResult.style.vocabulary}</div>
                </Space>
              </Card>
            )}

            {analysisResult.keyElements && analysisResult.keyElements.length > 0 && (
              <Card title="核心要素" size="small" style={{ marginBottom: 16 }}>
                <Space wrap>
                  {analysisResult.keyElements.map((element: string, index: number) => (
                    <Tag key={index} color="blue">{element}</Tag>
                  ))}
                </Space>
              </Card>
            )}

            {analysisResult.variables && analysisResult.variables.length > 0 && (
              <Card title="识别的变量" size="small" style={{ marginBottom: 16 }}>
                <List
                  dataSource={analysisResult.variables}
                  renderItem={(variable: any) => (
                    <List.Item>
                      <Space>
                        <Tag color="blue">{`{${variable.name}}`}</Tag>
                        <Text>{variable.description}</Text>
                        <Text type="secondary">示例: {variable.example}</Text>
                      </Space>
                    </List.Item>
                  )}
                />
              </Card>
            )}

            {analysisResult.patterns && analysisResult.patterns.length > 0 && (
              <Card title="固定模式" size="small" style={{ marginBottom: 16 }}>
                <List
                  dataSource={analysisResult.patterns}
                  renderItem={(pattern: string, index: number) => (
                    <List.Item>
                      <Text>{index + 1}. {pattern}</Text>
                    </List.Item>
                  )}
                />
              </Card>
            )}

            {analysisResult.templateSuggestion && (
              <Card title="模板建议" size="small" style={{ marginBottom: 16 }}>
                <Paragraph>{analysisResult.templateSuggestion}</Paragraph>
              </Card>
            )}

            {/* 如果没有任何结构化数据，显示完整的JSON */}
            {!analysisResult.rawAnalysis &&
             !analysisResult.structure &&
             !analysisResult.style &&
             !analysisResult.variables && (
              <Card title="分析数据" size="small" style={{ marginBottom: 16 }}>
                <Alert
                  type="info"
                  message="解析的数据结构与预期不符，显示完整数据"
                  style={{ marginBottom: 16 }}
                />
                <pre style={{
                  whiteSpace: 'pre-wrap',
                  wordBreak: 'break-word',
                  maxHeight: '400px',
                  overflow: 'auto',
                  background: '#f5f5f5',
                  padding: '12px',
                  borderRadius: '4px'
                }}>
                  {JSON.stringify(analysisResult, null, 2)}
                </pre>
              </Card>
            )}

            <div className="step-actions">
              <Space>
                <Button onClick={() => setCurrentStep(0)}>返回修改</Button>
                <Button
                  type="primary"
                  onClick={() => setCurrentStep(2)}
                  disabled={!extractedTemplate}
                >
                  下一步
                </Button>
              </Space>
            </div>
          </div>
        )}

        {/* 步骤3：编辑和完善模板 */}
        {currentStep === 2 && extractedTemplate && (
          <div className="step-content">
            <Form form={form} layout="vertical">
              <Form.Item
                label="模板名称"
                name="templateName"
                rules={[{ required: true, message: '请输入模板名称' }]}
                initialValue={extractedTemplate.name}
              >
                <Input placeholder="给模板起个名字" />
              </Form.Item>

              <Form.Item
                label="模板描述"
                name="description"
                initialValue={extractedTemplate.description}
              >
                <TextArea
                  placeholder="简单描述这个模板的用途和特点"
                  rows={3}
                />
              </Form.Item>

              <Form.Item
                label="模板内容"
                name="templateContent"
                initialValue={extractedTemplate.content}
                extra="使用 {变量名} 格式标记可替换部分"
              >
                <TextArea
                  placeholder="模板内容..."
                  rows={12}
                  style={{ fontFamily: 'monospace' }}
                />
              </Form.Item>

              <Form.Item
                label="标签"
                name="tags"
              >
                <Select
                  mode="tags"
                  placeholder="添加标签，便于搜索"
                  style={{ width: '100%' }}
                />
              </Form.Item>
            </Form>

            <div className="step-actions">
              <Space>
                <Button onClick={() => setCurrentStep(1)}>上一步</Button>
                <Button onClick={onCancel}>取消</Button>
                <Button type="primary" onClick={handleComplete}>
                  完成提炼
                </Button>
              </Space>
            </div>
          </div>
        )}
      </Spin>
    </div>
  );
};

export default TemplateExtractor;